import React, { Component } from 'react'
import { Select, Tabs } from 'antd'
import Header from '../Header'
import Map from './map.js'

const Option = Select.Option
const TabPane = Tabs.TabPane
const proviceData = ['sh', 'hb']
const cityData = {
  sh: ['宝山', '徐汇', '杨浦'],
  hb: ['武汉', '仙桃', '麻城']
}

export default class Home extends Component {
  state = {
    cities: cityData[proviceData[0]],
    secondCity: cityData[proviceData[0]][0]
  }
  render() {
    const { cities } = this.state
    return (
      <div>
        <Select defaultValue={proviceData[0]}>
          {proviceData.map(item => (
            <Option key={item}>{item}</Option>
          ))}
        </Select>
        <Select defaultValue={cityData[0]} style={{ width: '150px' }}>
          {cities.map(item => (
            <Option key={item}>{item}</Option>
          ))}
        </Select>

        <Tabs defaultActiveKey="1" animated={false}>
          <TabPane tab="one-1" key="1">
            <Header />
          </TabPane>
          <TabPane tab="one-2" key="2">
            <Map />
          </TabPane>
          <TabPane tab="one-3" key="3">
            3
          </TabPane>
        </Tabs>
      </div>
    )
  }
}
